<template>
    <div class="box flex fd-column ai-center">
        <transition-group name="message">
            <p class="item" v-for="item in list" :key="item.id">{{item.message}}</p>
        </transition-group>
    </div>
</template>

<script>
    import Vue from 'vue';
    export default {
        name: "Alert",
        data() {
            return {
                list: [],
                count: 0,
            }
        },
        methods: {
            show(message) {
                this.list.unshift({
                    message: message,
                    id: Date.now().toString()
                });
                setTimeout(() => {
                    this.list.pop();
                }, 1500);
            }
        },
        mounted() {
            Vue.prototype.$alert = this.show;
        }
    }
</script>

<style scoped lang="scss">
    .box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 0;
        z-index: 510510;

        .item {
            position: relative;
            top: 0;
            margin-top: 10px;
            padding: 10px 15px;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 18px;
            color: white;
            background-color: #999;
            user-select: none;
            transition: all .5s;
        }

        .message-enter, .message-leave-to {
            opacity: 0;
        }

        .message-enter {
            transform: translateY(-25px);
        }

        .message-leave-to {
            transform: translateY(25px);
        }
    }
</style>